<template>
  <a-modal
    title="创建商户级限额管理"
    v-model="show"
    :maskClosable="false"
    :width="1080"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="merchantLevelManagerAddVisiable"
  >
    <a-tabs v-model="tabActiveKey">
      <a-tab-pane
        key="1"
        tab="商户限额"
      >
        <a-form :form="form">
          <a-row>商户限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="商户号"
                           v-bind="formItemLayout">
                <a-select
                  show-search
                  placeholder="请输入代码或名称"
                  option-filter-prop="children"
                  style="width: 334px"
                  :filter-option="filterOption"
                  @focus="selectMchntNo"
                  @search="selectMchntNo"
                  @change="selected"
                  v-decorator="['mchntNo',{rules: [{ required: true, message: '必填字段'}]}]"
                >
                  <a-select-option v-for="(d,index) in suData" :key="d.mchntNo">
                    {{ d.mchntNo }}-{{d.mchntName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label='商户等级'
                           :labelCol="{span: 12}"
                           :wrapperCol="{span: 12}">
                <a-input v-decorator="['mchntNoLevel',{rules: [{ required: true, message: '必填字段'}]}]"
                         :disabled="true"/>

              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-button type="primary" style="width: 167px" @click="showMchntNoLevelInfo">商户等级限额详情</a-button>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='月累计限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>借记限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔借记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['singleLimitLoanMaxAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='日累计借记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitLoanAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计借记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitLoanAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>贷记限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔贷记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['singleLimitCreditMaxAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='日累计贷记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitCreditAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计贷记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitCreditAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>退款限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['refundDayLimitAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='单笔借记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['refundSingleLimitLoanMaxAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计借记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['refundDayLimitLoanAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='单笔贷记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['refundSingleLimitCredMaxAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计贷记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['refundDayLimitCredAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div>
          <mchnt-no-level-info
            ref="mchntLevelInfo"
            @close="handleMchntNoLevelInfoClose"
            :mchntNoLevelInfoVisiable="mchntNoLevelInfo.visiable">
          </mchnt-no-level-info>
        </div>
        <br/>
        <br/>
        <div class="drawer-bootom-button">
          <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
            <a-button style="margin-right: .8rem">取消</a-button>
          </a-popconfirm>
          <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="商户终端限额"
      >
        <a-form :form="formTrem">
          <a-row>商户终端限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="商户号"
                           v-bind="formItemLayout">
                <a-select
                  show-search
                  placeholder="请输入代码或名称"
                  option-filter-prop="children"
                  style="width: 334px"
                  :filter-option="filterOption"
                  @focus="selectMchntNo"
                  @search="selectMchntNo"
                  @change="selectedTrem"
                  v-decorator="['mchntNo',{rules: [{ required: true, message: '必填字段'}]}]"
                >
                  <a-select-option v-for="(d,index) in suData" :key="d.mchntNo">
                    {{ d.mchntNo }}-{{d.mchntName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label='商户等级'
                           :labelCol="{span: 12}"
                           :wrapperCol="{span: 12}">
                <a-input v-decorator="['mchntNoLevel',{rules: [{ required: true, message: '必填字段'}]}]"
                         :disabled="true"/>

              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-button type="primary" style="width: 167px" @click="showMchntNoLevelInfo">商户等级限额详情</a-button>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="终端号"
                           v-bind="formItemLayout">
                <a-select
                  show-search
                  placeholder="请输入代码或名称"
                  option-filter-prop="children"
                  style="width: 334px"
                  :filter-option="filterOption"
                  @focus="tremSelectMchntNo"
                  @search="tremSelectMchntNo"
                  @change="tremSelected"
                  v-decorator="['termNo',{rules: [{ required: true, message: '必填字段'}]}]"
                >
                  <a-select-option v-for="d in tremSuData" :key="d.termNo">
                    {{ d.termNo }}-{{d.tmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="日累计限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='月累计限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>借记限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔借记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['singleLimitLoanMaxAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='日累计借记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitLoanAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计借记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitLoanAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>贷记限额</a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="单笔贷记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['singleLimitCreditMaxAmt']"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item label='日累计贷记限额'
                           v-bind="formItemLayout">
                <a-input v-decorator="['dayLimitCreditAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="月累计贷记限额"
                           v-bind="formItemLayout">
                <a-input v-decorator="['monthLimitCreditAmt']"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div>
          <mchnt-no-level-info
            ref="mchntLevelInfo"
            @close="handleMchntNoLevelInfoClose"
            :mchntNoLevelInfoVisiable="mchntNoLevelInfo.visiable">
          </mchnt-no-level-info>
        </div>
        <br/>
        <br/>
        <div class="drawer-bootom-button">
          <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
            <a-button style="margin-righTt: .8rem">取消</a-button>
          </a-popconfirm>
          <a-button @click="handleSubmitTrem" type="primary" :loading="loading">提交</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>

  </a-modal>


</template>
<script>
  import MchntNoLevelInfo from "./MchntNoLevelInfo";

  const formItemLayout = {
    labelCol: {span: 8},
    wrapperCol: {span: 16}
  }
  export default {
    name: 'MerchantLevelManagerAdd',
    components: {MchntNoLevelInfo},
    props: {
      merchantLevelManagerAddVisiable: {
        default: false
      },
      instId: '',
    },
    data() {
      return {
        tabActiveKey: '1',
        data: [],
        suData: [],
        suDataTrem:[],
        tremSuData:[],
        mchntNoLevelInfo: {
          visiable: false
        },
        loading: false,
        formItemLayout,
        form: this.$form.createForm(this),
        formTrem:this.$form.createForm(this),
        validateStatus: '',
        // firstValue: {},
        info: {
          infoName: '',
          remark: '',
          menuId: '',
          mchntLevelCode:''
        },
        infoTrem:{},
        mchntNoLevelInfos:[]
      }
    },
    computed: {
      show: {
        get: function () {
          return this.merchantLevelManagerAddVisiable
        },
        set: function () {
        }
      }
    },
    mounted() {

    },
    //监听
    watch: {
      tabActiveKey (val, oldVal) {
        let mchntNo
        this.$nextTick(() => {
          switch (val) {
            case '1':
              mchntNo = this.formTrem.getFieldValue('mchntNo')
              this.form.setFieldsValue({
                mchntNo
              })
              this.selectMchntNoLevel(mchntNo)
              break;
            case '2':
              mchntNo = this.form.getFieldValue('mchntNo')
              this.formTrem.setFieldsValue({
                mchntNo: this.form.getFieldValue('mchntNo')
              })
              this.selectMchntNoLevelTrem(mchntNo)
              break;
          }
        })
      }
    },
    methods: {

      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },

      getMoment(value) {
        return this.$moment(value).format('YYYY-MM-DD HH:MM:SS.MS')
      },

      selectMchntNo() {
        this.suData = []
        let param = {}
        param = {
          q: encodeURIComponent(`&${this.instId}`),
          pageSize: 20
        }
        this.$get('admin/mcmp/bMchntBaseInfo/mchntFormalSelect2List', param).then((r) => {
          this.suData.push(...r.data.rows);
        })
      },
      tremSelectMchntNo(val) {
        let mchntNo = this.formTrem.getFieldsValue(['mchntNo'])
        if (mchntNo.mchntNo) {
          this.tremSuData = []
          let param = {}
          if (val) {
            param = {
              q: encodeURIComponent(val + `&${this.instId}`),
              pageSize: 20,
              mcNo : mchntNo.mchntNo,
              opp: '1'
            }
            if (val.length >= 5) {
              this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
                let result = r.data.data

                this.tremSuData=result;
              })
            }
          } else {
            param = {
              q: encodeURIComponent(`&${this.instId}`),
              pageSize: 20,
              mcNo : mchntNo.mchntNo,
              opp: '1'
            }
            this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
              let result = r.data.data
                this.tremSuData=result;
            })
          }
      }else {
        this.$message.warning('请先选择商户号获取商户等级！')
      }},

      selected(val) {
        this.selectMchntNoLevel(val)
      },
      selectedTrem(val) {
        this.selectMchntNoLevelTrem(val)
      },
        tremSelected(val) {
          this.tremSelectMchntNo(val)
        },
      selectMchntNoLevel(val) {
        let param = {
          instId: this.instId,
          mchntNo: val
        }
        this.$get('admin/quota/merchantGradeManager/mchntLevel', param).then((r) => {
          this.info.mchntLevelCode=r.data.data
          this.form.setFieldsValue({
            mchntNoLevel: r.data.message,
          })
        })
      },
      selectMchntNoLevelTrem(val) {
        let param = {
          instId: this.instId,
          mchntNo: val
        }
        this.$get('admin/quota/merchantGradeManager/mchntLevel', param).then((r) => {
          this.info.mchntLevelCode=r.data.data
          this.formTrem.setFieldsValue({
            mchntNoLevel: r.data.message,
          })
        })
      },
      async showMchntNoLevelInfo(val) {
        let mchntNo = this.form.getFieldsValue(['mchntNo'])
        if (mchntNo.mchntNo){
        let param = {
          instId: this.instId,
          mchntNo: mchntNo.mchntNo
        }
        this.$get('/admin/quota/merchantLevelManager/selectMchntNoLevel', param).then((r) => {
          if (r.data.code!="100000"){
            this.$message.error(r.data.message);
          }else {
            this.mchntNoLevelInfos=r.data.data[0];
            this.$refs.mchntLevelInfo.setMerchantLevelManagerFormValues(this.mchntNoLevelInfos)
            this.mchntNoLevelInfo.visiable = true
          }
        })}else {
          this.$message.warning('请先选择商户号获取商户等级！')
        }
      },

      // showMchntNoLevelInfo() {
      //         let mchntNo = this.form.getFieldsValue(['mchntNo'])
      // this.selectMchntNoLevelInfo(mchntNo.mchntNo);
      //   if (mchntNo.mchntNo){
      //     this.$refs.mchntLevelInfo.setMerchantLevelManagerFormValues(this.mchntNoLevelInfos)
      //     this.mchntNoLevelInfo.visiable = true
      //   }else {
      //     this.$message.warning('请先选择商户号获取商户等级！')
      //   }
      //
      // },

      handleMchntNoLevelInfoClose(){
        this.mchntNoLevelInfo.visiable = false
      },

      reset() {
        this.loading = false
        this.form.resetFields()
      },
      onClose() {
        this.reset()
        this.$emit('close')
      },
      handleSubmit() {
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log("****d"+this.info.mchntLevelCode)
            this.setInfoFields()
            this.loading = true
            this.info.instId = this.instId
            this.info.optFlag = 'add'
            this.info.riskOccurArea = this.info.termAddrPrvnc + '/' + this.info.termAddrCity
            this.info.validDate = this.getMoment(this.info.validDate)
            // console.log(this.info)
            this.$post('/admin/quota/merchantLevelManager/saveMcQuota', {
              ...this.info
            }).then((r) => {
              if (r.data.code!="100000"){
                this.loading = false
                this.$message.error(r.data.message)
              }else {
                this.reset()
                this.$emit('success')
              }
            }).catch(() => {
              this.loading = false
            })
          }
        })

      },
      handleSubmitTrem() {
        this.formTrem.validateFields((err, values) => {
          if (!err) {
            console.log("****d"+this.info.mchntLevelCode)
            this.setInfoFieldsTrem()
            this.loading = true
            this.infoTrem.instId = this.instId
            this.infoTrem.optFlag = 'add'
            this.infoTrem.riskOccurArea = this.info.termAddrPrvnc + '/' + this.info.termAddrCity
            this.infoTrem.validDate = this.getMoment(this.info.validDate)
            this.infoTrem.mcTermNo=values.termNo
            // console.log(this.info)
            this.$post('/admin/quota/merchantLevelManager/saveMcTremQuota', {
              ...this.infoTrem
            }).then((r) => {
              if (r.data.code!="100000"){
                this.$message.error(r.data.message)
              }else {
                this.reset()
                this.$emit('success')
              }
            }).catch(() => {
              this.loading = false
            })
          }
        })

      },

      setInfoFields() {
        let values = this.form.getFieldsValue(['mchntNo', 'mchntNoLevel', 'dayLimitAmt', 'monthLimitAmt',
          'singleLimitLoanMaxAmt', 'dayLimitLoanAmt', 'monthLimitLoanAmt', 'singleLimitCreditMaxAmt', 'dayLimitCreditAmt',
          'monthLimitCreditAmt', 'refundDayLimitAmt', 'refundSingleLimitLoanMaxAmt', 'refundDayLimitLoanAmt',
          'refundSingleLimitCredMaxAmt', 'refundDayLimitCredAmt'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.info[_key] = values[_key]
          })
        }
      },

      setInfoFieldsTrem() {
        let values = this.formTrem.getFieldsValue(['mchntNo','tremNo', 'mchntNoLevel', 'dayLimitAmt', 'monthLimitAmt',
          'singleLimitLoanMaxAmt', 'dayLimitLoanAmt', 'monthLimitLoanAmt', 'singleLimitCreditMaxAmt', 'dayLimitCreditAmt',
          'monthLimitCreditAmt'])
        if (typeof values !== 'undefined') {
          Object.keys(values).forEach(_key => {
            this.infoTrem[_key] = values[_key]
          })
        }
      },

    },

  }
</script>

